<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<div class="table-format" v-if="type!='CUSTOM'">
			<a-row>
				<a-col :span="12">
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="tableI18n('dataFormatting','数据格式化')">
						<a-select v-model:value="content.dataFormat" style="width: 300px;"  :getPopupContainer="p=>p.parentNode">
							<a-select-option value="none">{{tableI18n('unformatted','不格式化')}}</a-select-option>
							<a-select-option value="thousands">{{tableI18n('thousand','千分位')}}</a-select-option>
							<a-select-option value="percentage">{{tableI18n('percent','百分比')}}</a-select-option>
							<a-select-option value="trillion">{{tableI18n('digital','数字转千/万/亿')}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="tableI18n('decimalPlaces','小数位')">
						<div style="display: flex">
							<div style="flex: 1">
								<a-select style="width: 100%" v-model:value="content.decimals"  :getPopupContainer="p=>p.parentNode">
									<a-select-option value="none">{{tableI18n('decimalsNot','不处理小数')}}</a-select-option>
									<a-select-option value="roundNumbers">{{tableI18n('roundNumbers','取整数')}}</a-select-option>
									<a-select-option value="oneDecimals">{{tableI18n('KeepOnePlace','保留一位小数')}}</a-select-option>
									<a-select-option value="twoDecimals">{{tableI18n('KeepTwoPlace','保留两位小数')}}</a-select-option>
									<a-select-option value="threeDecimals">{{tableI18n('KeepThreePlace','保留三位小数')}}</a-select-option>
								</a-select>
							</div>
						</div>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="tableI18n('numericPrefix','数值前缀') ">
						<a-input style="width: 300px;"  :placeholder="tableI18n('pleasePrefix','请输入数值前缀')" v-model:value="content.prefix"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="tableI18n('numericSuffix','数值后缀')">
						<a-input style="width: 300px;" :placeholder="tableI18n('pleaseSuffix','请输入数值后缀')" v-model:value="content.suffix"/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="tableI18n('aggregateICONS','聚合图标')">
						<a-switch size="small" v-model:checked="content.iconfontShow"/>
					</a-form-item>
				</a-col>
				<a-col :span="12" v-if="content.iconfontShow">
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="tableI18n('iconColors','图标颜色')">
						<a-input style="width: 150px;" v-model:value="content.iconfontColor" type="color"/>
					</a-form-item>
				</a-col>
			</a-row>
		</div>
		<div v-else style="height: 100%">
            <RxVueMonaco
                ref="jsMonacoes"
                :value="formatter"
                language="javascript"
                class="monacoEditor"
                style="height: 100%"
            >
            </RxVueMonaco>
		</div>
	</rx-dialog>
</template>

<script>
import {Util,RxVueMonaco,RxDialog} from "@lowcode/jpaas-base-lib";
export default {
	name: "TableFormat",
	props: ['format', 'destroy', 'type'],
	components:{
        RxVueMonaco,
        RxDialog
	},
	data() {
		return {
			labelCol: { span:6 },
			wrapperCol: { span:6 },
			content: {
				dataFormat: 'none',//格式华
				prefix: '',//前缀
				suffix: '',//后缀
				decimals: 'none',//小数处理
				round: false,
				iconfontShow:false,
				iconfontColor:'#ffffff',

			},
			formatter:"/**\n" +
				" * list:"+this.tableI18n('listQuery','查询的列表数据')+"\n" +
				" * value:"+this.tableI18n('displayedData','展示的数据')+"\n" +
				" */\n" +
				"return value;"
		}
	},
	mounted() {
		this.init()
	},
	methods: {
		tableI18n(name,text,key){
			return this.$ti18(name,text,"tableFormatLang",key);
		},
		init() {
			if (this.type!='CUSTOM' && this.format.dataFormat != undefined) {
				this.content = this.format
			}else if(this.type=='CUSTOM' && this.format) {
				this.formatter=this.format;
			}
		},
		handleSubmit() {
			Util.closeWindow(this, "ok", this.type!='CUSTOM'?this.content:this.formatter);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
	}
}
</script>

<style scoped>
.table-format {
	width: 100%;
	padding: 20px;
}
</style>
